<template>
<div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
        <el-step title="填写课程基本信息" />
        <el-step title="创建课程大纲" />
        <el-step title="最终发布" />
    </el-steps>

    <el-form label-width="120px">

        <el-form-item label="课程标题">
            <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写" />
        </el-form-item>

        <!-- 所属分类 TODO -->
        <el-form-item label="课程类别">
            <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="oneSubjectLevelChange">

                <el-option v-for="subject in oneSubjectList" :key="subject.id" :label="subject.title" :value="subject.id" />
            </el-select>

            <el-select v-model="courseInfo.subjectId" placeholder="二级分类">

                <el-option v-for="subject in twoSubjectList" :key="subject.id" :label="subject.title" :value="subject.id" />
            </el-select>
        </el-form-item>
        <!-- 课程讲师 TODO -->
        <el-form-item label="课程讲师">
            <el-select v-model="courseInfo.teacherId" placeholder="请选择">
                <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name" :value="teacher.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="总课时">
            <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数" />
        </el-form-item>

        <!-- 课程简介 TODO -->
        <el-form-item label="课程简介">
            <tinymce :height="300" v-model="courseInfo.description" />
        </el-form-item>
        <!-- 课程封面 TODO -->
        <el-form-item label="课程封面">
            <!-- 这个组件省略的自动上传 实际效果是自动上传 -->
            <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :action="BASE_API+'/eduoss/fileoss/upload'" class="avatar-uploader">
                <img :src="courseInfo.cover">
            </el-upload>

        </el-form-item>
        <el-form-item label="课程价格">
            <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元" /> 元
        </el-form-item>

        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import course from "@/api/edu/course"
import subject from "@/api/edu/subject"
import Tinymce from '@/components/Tinymce'
export default {
    //声明组件
    components: {
        Tinymce
    },
    data() {
        return {
            saveBtnDisabled: false,
            courseInfo: {
                title: '',
                subjectId: '', //二级分类id
                subjectParentId: '', //一级分类id
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '/static/957.jpg',
                price: 0
            },
            teacherList: [], //存放讲师列表
            oneSubjectList: [], //一级分类
            twoSubjectList: [], //二级分类
            BASE_API: process.env.BASE_API,
            courseId: ''

        }
    },
    created() {
        this.init()
    },
    watch: {
        //监听路由变化 
        //用来解决回显后输入框中有回显数据 但是此时我想添加课程 点击添加课程发现回显数据并没有消失的问题
        $route(to, from) {
            //根据路由变化方式 路由发生变化  方法就会执行
            this.init();
        },
    },
    methods: {
        //通过init方法将数据回显和添加页面做个区别
        init() {
            if (this.$route.params && this.$route.params.id) {
                this.courseId = this.$route.params.id
                this.getCourseInfoId()
            } else {
                //加载讲师列表
                this.getListTeacher()
                //加载一级分类
                this.getOneSubject()
                this.courseInfo = {
                    title: '',
                    subjectId: '', //二级分类id
                    subjectParentId: '', //一级分类id
                    teacherId: '',
                    lessonNum: 0,
                    description: '',
                    cover: '/static/957.jpg',
                    price: 0
                }
            }
        },
        //根据id回显课程信息
        getCourseInfoId() {
            //在courseId课程信息中 有一级分类的id和二级分类的id  
            course.getCourseInfoById(this.courseId)
                .then(response => {
                    this.courseInfo = response.data.courseInfoVo
                    console.log(this.courseInfo.subjectParentId)
                    //问题:回显数据中二级分类显示的是id值
                    //获取所有的一级分类
                    subject.getSubjectList()
                        .then(response => {
                            //获取一级分类
                            this.oneSubjectList = response.data.list
                            //遍历一级分类
                            for (var i = 0; i < this.oneSubjectList.length; i++) {
                                var oneSubject = this.oneSubjectList[i]
                                if (oneSubject.id == this.courseInfo.subjectParentId) {
                                    //这个判断条件写错了 找了挺久 id应该与id对应
                                    this.twoSubjectList = oneSubject.children

                                }
                            }
                        })
                    //加载讲师列表
                    this.getListTeacher()
                })
        },
        //上传成功后执行的方法
        handleAvatarSuccess(res, file) {
            this.courseInfo.cover = res.data.url
        },
        //上传前执行的方法 一般是对文件的限制  比如类型和大小
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error("上传文件的格式只能是jpg");
            }
            if (!isLt2M) {
                this.$message.error("上传的文件必须小于2M");
            }
            return isJPG && isLt2M

        },
        //点击某一个一级分类的值触发change  显示一级分类下的二级分类
        oneSubjectLevelChange(value) { //要取到一级分类的id
            //value就是一级分类的id 框架封装好的
            for (var i = 0; i < this.oneSubjectList.length; i++) {
                //得到每个一级分类
                var oneSubject = this.oneSubjectList[i];
                //判断所有的一级分类id与点击的一级分类id是否一样
                if (value === oneSubject.id) {
                    //从所有的一分类中获取所有的二级分类
                    this.twoSubjectList = oneSubject.children;
                    this.courseInfo.subjectId = ''
                }
            }

        },
        //获取一级分类
        getOneSubject() {
            subject.getSubjectList().then(response => {
                this.oneSubjectList = response.data.list
            })
        },
        //讲师下拉列表
        getListTeacher() {
            course.getListTeacher()
                .then(response => {
                    this.teacherList = response.data.items
                })
        },
        saveOrUpdate() {
            if (!this.courseInfo.id) { // 也可以使用 this.courseId
                this.save()
            } else {
                this.update()
            }
        },
        save() {

            course.addCourseInfo(this.courseInfo).then(response => {
                //提示添加成功
                this.$message({
                    type: "success",
                    message: "添加课程分类成功",
                });
                //点击按钮进行路由跳转
                this.$router.push({
                    path: '/course/chapter/' + response.data.courseId
                })
            })
        },
        update() {
            course.updateCourseInfoById(this.courseInfo)
                .then(response => {
                    //提示更新成功
                    this.$message({
                        type: "success",
                        message: "更新课程分类成功",
                    });

                    //点击按钮进行路由跳转
                    this.$router.push({
                        path: '/course/chapter/' + this.courseId
                    })
                })

        }
    }
}
</script>

<style scoped>
.tinymce-container {
    line-height: 29px;
}
</style>
